<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初识setup</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          name: "andy",
          sex: "男",
          age: 25,
        };
      },
      template: `
            <div>
                <h1>我的信息</h1>
                <h2>姓名：andy</h2>
                <h2>性别：sex</h2>
                <h2>年龄：age</h2>
                <button @click="sayHello" > 打招呼</button><br>
                <button @click="test1">vue2.x访问vue3.x中的数据</button><br>
                <button @click="test2">vue3.x访问vue2.x中的数据</button><br>
            </div>
        `,
      methods: {
        test() {
          console.log(
            `姓名:${this.name} 年龄:${this.age} 性别:${this.sex} sayHello:${this.sayHello}`
          );
        },
 
      },
      //在setup中不能使用this，因为setup在data、methods等属性配置之前调用setup
      setup(props)  {
          let name = "andy";
          let age = 25;
          function sayHello() {
            console.log("sayHello-->", name, age);
            alert(`您好，我是${name},我今年${age}岁`);
          }
          function test2() {
            console.log(
              `姓名：${name},年龄：${age},性别：,sayhello：${sayHello}`
            );
          }
          return { name, age, sayHello, test2 };
        },
    });

    const vm = app.mount("#app");
  </script>
</html>
